//顶部导航
$.ajax({
    type: 'get',
    url: '../../json/allsort1.json',
    async: 'true',
    success: function (data) {
        var topArr =data.topNav;
        for(var i = 0;i < topArr.length;i ++){
            var node = $(`<li><a href="">
                ${topArr[i].title}
            </a></li>`);
            node.appendTo(".nav #licontent");
        }
    }

})
//左边商品列表
$.ajax({
    type: 'get',
    url: '../../json/allsort1.json',
    async: true,
    success: function (data) {
        var sideArr = data.sideNav;
        for (var i = 0; i < sideArr.length; i++) {
            var node = $(`<li class = "licontent">
                <a href = "/index.html" class = "title">
                    ${sideArr[i].title}
                </a>
                </li>`);
            node.appendTo(".nav #ul_level12");
        }
        
    }
})
$.ajax({
    type: 'get',
    url: '../../json/search.json',
    async: true,
    success: function (data) {
        var searchArr = data.search;
        for (var i = 0; i < searchArr.length; i++) {
            var node = $(`<a href="" class="curr">${searchArr[i].name}</a>`);
            node.appendTo(".search #hotWord");

        }
    }
})
class Magnifying{
    constructor(){
        //滑块
        this.float = this.$('.float_layer');
        //遮罩
        this.mark = this.$('.mark');
        //大图盒子
        this.b = this.$('.b');
        //大图
        this.b_img = this.$('.b img');
        //左边小图
        this.small_img = this.$('#ulSlider li img');
        //添加事件
        this.addEvent();
    }
    addEvent(){
        // 遮罩 - 移入
        this.mark.onmouseover = function(){
            // 滑块显示
            this.float.style.display = 'block';
            // 大图盒子显示
            this.b.style.display = 'block';
        }.bind(this);

        // 遮罩 - 移出
        this.mark.onmouseout = function(){
            // 滑块消失
            this.float.style.display = 'none';
            // 大图盒子消失
            this.b.style.display = 'none';
        }.bind(this);
        //左边小图点击，右边大图切换
        // this.small_img.onclick = function(){

        // }

        // 遮罩 - 移动
        // 鼠标跟随
        this.mark.onmousemove = function(evt){

            let e = evt || window.event;
            let left = e.offsetX - this.float.offsetWidth / 2;
            let top = e.offsetY - this.float.offsetHeight / 2;
            //边界
            if(left <= 0){
                left = 0;
            }else if(left >= this.mark.offsetWidth - this.float.offsetWidth){
                left = this.mark.offsetWidth - this.float.offsetWidth;
            }
            if(top <= 0){
                top = 0;
            }else if(top >= this.mark.offsetHeight - this.float.offsetHeight){
                top = this.mark.offsetHeight - this.float.offsetHeight;
            }
            this.float.style.left = left + 'px';
            this.float.style.top = top + 'px';

            // 滑块在小图范围中的移动比例
            // x_p = 滑块当前的left值 / (小图宽度 - 滑块宽度)
            let x_p = left / (this.mark.offsetWidth - this.float.offsetWidth);
            // y_p = 滑块当前的top值 / (小图高度 - 滑块高度)
            let y_p = top / (this.mark.offsetHeight - this.float.offsetHeight);

            // 大图.style.left = - (大图宽度 - 大图盒子的宽度) * x_p + 'px';
            this.b_img.style.left = - (this.b_img.offsetWidth - this.b.offsetWidth) * x_p + 'px';
            // 大图.style.top = - (大图高度- 大图盒子的高度) * y_p + 'px';
            this.b_img.style.top = - (this.b_img.offsetHeight - this.b.offsetHeight) * y_p + 'px';
        }.bind(this);
    }
    $(selector){
        return document.querySelector(selector);
    }
}
new Magnifying();

// // tab切换
//         let o_table = document.getElementsByClassName('table');
//         let o_img =document.getElementsByClassName('img');
//             o_table.onclick = function(){
//                this.table.style.display = block;
//                this.o_img.style.display = none;
//             }

function Product(){
    //属性
    this.addin = document.querySelector('#btnAddShoppingCart');
    this.che = document.querySelector('#i_totalnum_top');
    this.go = document.querySelector('.gou');
    this.init();
    this.addEvent();
}
Product.prototype = {
    constructor : Product,
    addEvent(){
        // let that = this;
        this.$go.on('click',function(){
            location.href = 'cart.html';
        })
        this.$addin.each(function(){
            $(this).click(function(event){
                //商品id
                let good_id = $(this).parent().parent().parent().attr('data-good-id');
                //商品名称
                let good_name = $(this).prev().prev().siblings(h3).text();
                //商品价格
                let good_price = parseInt($(this).prev().text());
                //商品src
                let good_src = $(this).prev().prev().prev().siblings('img').attr('src');

                //获取cookie中的商品
                /*
                    key : carts
                    value : 
                    {
                        "sp1" : {

                        }
                    }
                */
                let cookie_str = $.cookie('carts') ? $.cookie('carts') : '';
                let cookie_obj = convertStrToObj(cookie_str);
                //判断当前商品是否在购物车中
                if(good_id in cookie_obj){
                    //找到数量 + 1
                    cookie_obj[good_id].num ++;
                }else{
                    cookie_obj[good_id] = {
                        "name" : good_name,
                        "price" : good_price,
                        "src" : good_src,
                        "num" : 1
                    }
                }
                //创建cookie
                $.cookie('carts',JSON.stringify(cookie_obj),{expires : 3,path : '/'}); 
            })
        })
    },
    init(){
        let cookie_str = $.cookie('carts') ? $.cookie('carts') : '';
        let cookie_obj = convertStrToObj(cookie_str);
        let sum = 0;
        for(let key in cookie_obj){
            sum += cookie_obj[key].num;
        }
        
        this.$che.val(`购物车(${sum})`);
    }
}
new Product();


        
